<template>
  <div>
    <div>年龄是 {{count}}</div>
    <div>
      <button @click="addcount">click</button>
    </div>
    <div :class="{fixed:top>100}">
      <input type="text" name id @keyup.enter="add" v-model="conten" />
    </div>
    <ul>
      <li v-for="item in data">{{item}}</li>
    </ul>
    <img src="./img/1.jpg" alt="" width="330" height="200">
  </div>
</template>
<script>
import {
  ref,
  onMounted,
  reactive,
  onUnmounted,
  watchEffect,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount
} from "vue";
import useScroll from "./components/scroll.js";
import "./lib/idnex.js"

export default {
  setup() {
    // 注释文件
    onBeforeMount(() => {
      console.log("组件挂载之前");
    });
    onMounted(() => {     
      console.log("组件挂载完成");
    });
    onBeforeUpdate(() => {
      console.log("数据更新，虚拟DOM打补丁之前");
    });
    onUpdated(() => {
      console.log("数据跟新，虚拟DOM渲染完成");
    });
    onBeforeUnmount(() => {
      console.log("组件销毁前");
    });
    onUnmounted(() => {
      console.log("组件销毁后");
    });
    const conten = ref("");
    const data = reactive(["吃饭", "睡觉", "吃饭", "睡觉", "吃饭", "睡觉"]);
    function add() {
      if (!conten.value) {
        return;
      }
      data.push(conten.value);
      conten.value = "";
    }
    let newage = ref(6);
    const { count, addcount, data_2 } = countage(newage, data, conten);
    const { top } = useScroll();

    return {
      data,
      conten,
      add,
      top,
      count,
      addcount,
      data_2
    };
  }
};

function countage(init, newdata, conten) {
  let count = ref(init.value + 9);
  let data = reactive(newdata);
  let content = ref(conten);
  let data_2 = reactive([]);
  function addcount() {
    count.value++;
    data_2 = data.filter(item => item.indexOf("吃饭") !== -1);
  }
  console.log(data_2);
  return { count, addcount, data_2 };
}
</script>

<style>
li {
  list-style: none;
  line-height: 120px;
}
li:nth-of-type(odd) {
  background-color: pink;
}
li:nth-of-type(even) {
  background-color: limegreen;
}
.fixed {
  position: fixed;
  top: 20px;
  left: 20px;
}
</style>